<template>
  <div class="leave-record">
    <div class="search-box">
      <div class="key-box">
        <img src="../search.png" class="pic1" onclick="return false"/>
        <input class="key" placeholder="请输入身份证号" v-model="key" @blur="inputBlur" maxlength="18" @input="checkCert"/>
        <img src="../close.png" class="pic2" @click="clearData" onclick="return false" v-show="showIcon"/>
      </div>
      <div class="search-btn" @click="searchRecord">搜索</div>
    </div>

    <div class="screen-box">
      <div class="open-box" @click="openModal">
        <img src="../screening.png" class="pic2" onclick="return false"/>
        <span class="all">{{title}}</span>
        <img src="../down.png" class="pic3" onclick="return false"/>
      </div>
    </div>

    <!--筛选-->
    <div class="screen-modal" v-show="showModal">
      <div class="screen-con">
        <div class="content-sec">
          <div class="sec" @click="queryScreen('','全部')" :class="{'active2':type == ''}">全部
            <img src="../get.png" v-if="type == ''" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(3,'最近三天')" :class="{'active2':type == 3}">最近三天
            <img src="../get.png" v-if="type == 3" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(7,'最近一周')" :class="{'active2':type == 7}">最近一周
            <img src="../get.png" v-if="type == 7" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(14,'最近两周')" :class="{'active2':type == 14}">最近两周
            <img src="../get.png" v-if="type == 14" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(31,'最近一个月')" :class="{'active2':type == 31}">最近一个月
            <img src="../get.png" v-if="type == 31" class="pic7" onclick="return false"/>
          </div>
        </div>
      </div>
    </div>


    <div class="record-box" ref="wrapper" v-if="showData == 1">
      <div class="record-list">
        <div class="record-con" v-for="(item,index) in recordList" :key="index" v-if="recordList.length"
             @click="openDetail(item.id)">
          <img :src="item.userUrl" class="pic4" v-if="item.userUrl!='' && item.userUrl!=null" onclick="return false"/>
          <div class="pic4" v-else></div>

          <div class="record-user">
            <div class="user-box">
              <span class="name">{{item.userName}}</span>
              <span class="number">{{item.userCardNumber}}</span>
            </div>
            <div class="title">填写日期：{{item.time | format}}</div>
            <div class="finance-status-box">财务处理状态：<span :class="{'finance-status':item.status == 1}">{{item.status == 2?"已处理":"待处理"}}</span></div>
          </div>

          <img src="../in.png" class="pic6"/>

        </div>
        <div class="more-box" v-if="noMoreData && showData == 1">没有更多了~</div>
      </div>
    </div>


    <!--空页面-->
    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="../empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

    <backpage @backPage="backPage"></backpage>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"
  import BScroll from 'better-scroll'
  import {getDeviceRatio, formatDate, removeSessionStore} from "../../../config/util"
  import backpage from "../../../components/backpage"
  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  }

  export default {
    data() {
      return {
        showData: 1,
        showModal: false,
        key: "",
        title: "全部",
        type: "",
        userSign: "",
        recordList: [],
        recordScroll: null,
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
        showIcon: false
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.queryRecordList();
    },
    methods: {
      queryRecordList(callback) {//查询离职工资记录
        this.$vux.loading.show({
          text: '加载中',
        });

        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/get_resign_record_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/get_resign_record_list?sgin=" + this.userSign + "&userCardNumber=" + this.key + "&day=" + this.type + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.length > 0) {
              this.showData = 1;
              this.recordList = resultObj.data;

              if (callback) {
                callback();
              }
              this.$nextTick(() => {
                this.initScroll();
                this.recordScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.recordScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      searchRecord() {//根据key查询
        if (this.checkCertNo()) {
          this.currentPage = 1;
          this.PageSize = 20;
          this.queryRecordList(() => {
            this.$nextTick(() => {
              this.recordScroll = null;
              this.noMoreData = false;
              this.initScroll();
            });
          });
        }
      },
      openModal() {//打开筛选
        this.showModal = true;
      },
      queryScreen(key, val) {//根据筛选查询
        this.type = key;
        this.title = val;
        this.showModal = false;
        this.currentPage = 1;
        this.PageSize = 20;
        this.queryRecordList(() => {
          this.$nextTick(() => {
            this.recordScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      clearData() {
        this.key = ""
        this.showIcon = false;
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let time = (new Date()).getTime();
          let url = baseUrl + "/resident/get_resign_record_list?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);
          setTimeout(() => {
            this.axios.get(baseUrl + "/resident/get_resign_record_list?sgin=" + this.userSign + "&userCardNumber=" + this.key + "&day=" + this.type + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  this.recordList = this.recordList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.recordScroll) {
          this.recordScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.recordScroll.refresh();
        }
      },
      enable() {
        this.recordScroll && this.recordScroll.enable()
      },
      refresh() {
        this.recordScroll && this.recordScroll.refresh()
      },
      finishPullUp() {
        this.recordScroll && this.recordScroll.finishPullUp()
      },
      openDetail(id) {//详情
        removeSessionStore("withholdList");
        removeSessionStore("subsidyList");
        removeSessionStore("subsidy_withhold");
        removeSessionStore("userOrigin");
        this.$router.push({path: "/leavehistorydetail", query: {"id": id}});
      },
      checkCert() {//校验身份证
        let reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9X])$/; //身份证
        if (this.key == '') {
          this.showIcon = false;
        } else if (!reg.test(this.key)) {
          this.showIcon = true;
        }
      },
      checkCertNo() {
        let reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9X])$/;
        if (this.key == "" || this.key == null) {
          this.$vux.toast.text("请输入身份证号", "middle");
          return;
        } else if (!reg.test(this.key)) {
          this.$vux.toast.text("请输入正确的身份证号，最后一位是字母时要大写", "middle");
          return;
        }
        return true;
      },
      backPage() {
        this.$router.push({path: "/residentIndex"});
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      },
    },
    watch: {
      recordList() {
        this.$nextTick(() => {
          this.recordScroll.refresh();
        })
      }
    },
    components: {
      BScroll,
      backpage
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"
  .leave-record
    wh(100%, auto)
    background: rgba(242, 242, 242, 1)
    .search-box
      display flex
      align-items: center
      wh(100%, 1.2rem)
      background: $color
      .key-box
        display: flex
        align-items: center
        margin-left: 0.32rem
        wh(82.13%, 0.8rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.4rem)
        flex: 1
        .pic1
          margin-left: 0.253rem
          margin-right: 0.253rem
          wh(0.533rem, 0.533rem)
        .key
          width: 80%
          height: 0.5rem
          line-height: 0.5rem
          size-color(0.4rem, rgba(51, 51, 51, 1))
        .pic2
          margin-left: auto
          wh(0.48rem, 0.48rem)
          margin-right: 0.16rem
      .search-btn
        margin-left: 0.307rem
        margin-right: 0.32rem
        size-color(0.4rem, rgba(255, 255, 255, 1))
    .screen-box
      display: flex
      align-items: center
      wh(100%, 0.8rem)
      .open-box
        display: flex
        align-items: center
        wh(auto, 0.8rem)
        margin-left: 0.293rem
        .pic2
          margin-right: 0.173rem
          wh(0.48rem, 0.48rem)
        .all
          size-color(0.373rem, rgba(102, 102, 102, 1))
          margin-right: 0.12rem
        .pic3
          wh(0.32rem, 0.32rem)
    .screen-modal
      position: fixed
      top: 2rem
      left: 0
      right: 0
      bottom: 0
      z-index: 99
      background-color: rgba(0, 0, 0, 0.5)
      .screen-con
        wh(100%, auto)
        background: #FFF
        .content-sec
          display: flex
          flex-direction: column
          wh(auto, 100%)
          margin-left: 0.48rem
          margin-right: 0.507rem
          .sec
            display: flex
            align-items: center
            height: 1.067rem
            line-height: 1.067rem
            size-color(0.427rem, rgba(102, 102, 102, 1))
            &:nth-child(1)
              margin-top: 0.267rem
            &:last-child
              padding-bottom: 0.267rem
          .active2
            color: $color
          .pic7
            margin-left: auto
            wh(0.64rem, 0.64rem)
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 2rem
      left: 0
      right: 0
      bottom: 0
      z-index: -1
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
    .record-box
      position: fixed
      top: 2rem
      wh(100%, auto)
      bottom: 0
      z-index: 88
      overflow: hidden
      background: rgba(242, 242, 242, 1)
      .record-list
        display: flex
        flex-direction: column
        wh(100%, auto)
        .record-con
          display: flex
          align-items: center
          wh(100%, 2.053rem)
          background: rgba(255, 255, 255, 1)
          border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
          .pic4
            margin-left: 0.32rem
            margin-right: 0.32rem
            wh(1.067rem, 1.067rem)
            background: rgba(242, 242, 242, 1)
            border-radius(50%)
          .pic6
            margin-left: auto
            margin-right: 0.32rem
            wh(0.32rem, 0.32rem)
          .record-user
            display: flex
            flex-direction: column
            justify-content: center
            .user-box
              display: flex
              align-items: center
              padding-bottom: 0.107rem
              .name
                size-color(0.453rem, rgba(51, 51, 51, 1))
                width: 2.3rem
                ellipsis()
              .number
                size-color(0.373rem, rgba(102, 102, 102, 1))
            .title
              padding-top: 0.107rem
              size-color(0.347rem, rgba(153, 153, 153, 1))
            .finance-status-box
              padding-top: 0.16rem
              size-color(0.347rem, #999)
              .finance-status
                color: #FF5353
        .more-box
          text-align: center
          margin-top: 0.64rem
          padding-bottom: 0.8rem
          size-color(0.373rem, rgba(153, 153, 153, 1))
</style>
